<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>天气</title>
</head>
<body>

	请输入要查询的城市： <input type="text" id="city"><br>
<div id="container" style="width: 400px;height: 400px"></div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script type="text/javascript">
	$("#city").blur(function(){
		var city=$(this).val();
		$.ajax({
			url:"wea.php",
			data:{city:city},
			dataType:"json",
			type:"post",
			success:function(e){
				var week="";
				var temp_low="[";
				var temp_high="[";
				$.each(e,function(i,v){
					week+=v.week+",";
					temp_low+=v.temp_low+",";
					temp_high+=v.temp_high+",";
				});
				week=week.substring(0,27);
				week=week.split(",");
				temp_low+="]";
				temp_high+="]";

	var chart = Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: '一周平均温度'
    },
    subtitle: {
        text: '数据来源: mahongfei.com'
    },
    xAxis: {
        categories: week
    },
    yAxis: {
        title: {
            text: '温度'
        },
        labels: {
            formatter: function () {
                return this.value + '°';
            }
        }
    },
    tooltip: {
        crosshairs: true,
        shared: true
    },
    plotOptions: {
        spline: {
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        }
    },
    series: [{
        name: '最高温',
        marker: {
            symbol: 'square'
        },
        data: eval(temp_high)
    }, {
        name: '最低温',
        marker: {
            symbol: 'diamond'
        },
        data: eval(temp_low)
    }]
});

			}
		})
	});
</script>